<template>
  <el-container class="main_con">
    <div class="flex_div">
      <div class="left">
        <div class="phone-area">
          <div class="row relative w840">
            <div class="phone-header"><img src="@/assets/images/phonehead.png" /></div>
            <div class="scroll-body">
              <div class="page-content">
                <div class="diy-phone">
                  <div class="phone-body">
                    <div class="phone-main">
                      <vimage class="img_box" v-if="obj.configuration.style.bg_img" :src="obj.configuration.style.bg_img" ></vimage>
                      <img v-else class="img_box" src="@/assets/images/signin.png" />
                      <div class="mypages">
                        <div class="time_div">
                          <span>已坚持</span>
                          <div class="day_num" :style="'color:' + obj.configuration.style.day_color">
                            <div><span>0</span></div>
                            <div><span>0</span></div>
                            <div><span>0</span></div>
                          </div>
                          <span>天签到</span>
                        </div>
                        <span class="tips" :style="'color:' + obj.configuration.style.tip_color">今天未签到</span>
                        <div class="remind" v-if="obj.configuration.is_remind">
                          <span :style="'color:' + obj.configuration.style.tip_color">签到提醒</span>
                          <el-switch v-model="value" :active-color="obj.configuration.style.switch_color" :inactive-color="obj.configuration.style.switch_color"></el-switch>
                        </div>
                        <div class="rule">
                          <img src="@/assets/images/gold.png" />
                          <span>连续签到5天 赠送20积分</span>
                        </div>
                        <div class="calendar_div">
                          <div class="title_div">
                            <span class="title">每日签到记录</span>
                            <span class="mouth"></span>
                          </div>
                          <div class="read-more"><ss-calendar /></div>
                          <div class="line">
                            <div class="line_item"></div>
                            <i class="el-sc-xia4"></i>
                            <div class="line_item"></div>
                          </div>
                          <div class="list">
                            <div class="item">
                              <img src="@/assets/images/gold.png" />
                              <span class="info">连续签到5天 赠送20积分</span>
                              <span class="signbtn" :style="'background:' + obj.configuration.style.res_bg + ';color:' + obj.configuration.style.res_color">未领取</span>
                            </div>
                            <div class="item">
                              <img src="@/assets/images/gold.png" />
                              <span class="info">连续签到5天 赠送20积分</span>
                              <span class="signbtn">未领取</span>
                            </div>
                          </div>
                        </div>
                        <div class="sign_btn" :style="'background:' + obj.configuration.style.btn_bg + ';color:' + obj.configuration.style.btn_color"><span>马上签到</span></div>
                        <div class="rule_btn">
                          签到规则
                          <i class="el-sc-xiangyou"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="edit_content">
          <el-form size="medium" label-width="100px" class="edit_form" ref="Form" :model="obj.configuration" :rules="Rules">
            <el-tabs>
              <el-tab-pane label="规则设置">
                <el-form-item label="是否开启">
                  <el-radio-group v-model="obj.configuration.signIn">
                    <el-radio :label="true">开启</el-radio>
                    <el-radio :label="false">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="签到提醒">
                  <el-radio-group v-model="obj.configuration.is_remind">
                    <el-radio :label="true">开启</el-radio>
                    <el-radio :label="false">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="单次签到">
                  <el-input style="width: 300px;" v-model="obj.configuration.value">
                    <el-select v-model="obj.configuration.type" slot="append" placeholder="请选择">
                      <el-option label="积分" :value="1"></el-option>
                      <el-option label="余额" :value="2"></el-option>
                    </el-select>
                  </el-input>
                </el-form-item>
                <el-form-item label="周期">
                  <el-radio-group v-model="obj.configuration.pattern">
                    <el-radio :label="'day'">无限制</el-radio>
                    <el-radio :label="'month'">月</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="连续签到">
                  <el-button type="text" @click="addlist(1)">新增规则</el-button>
                  <div>
                    <div class="bg_div" v-for="(item, i) in obj.configuration.continuity" :key="i">
                      <i class="el-icon-error cancal" @click="del(1, i)"></i>
                      <el-form-item label="连续天数"><el-input style="width: 300px;" v-model="item.day"></el-input></el-form-item>
                      <el-form-item label="奖励">
                        <el-input style="width: 300px;" v-model="item.value">
                          <el-select v-model="item.type" slot="append" placeholder="请选择">
                            <el-option label="积分" :value="1"></el-option>
                            <el-option label="余额" :value="2"></el-option>
                          </el-select>
                        </el-input>
                      </el-form-item>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="累计签到">
                  <el-button type="text" @click="addlist(2)">新增规则</el-button>
                  <div>
                    <div class="bg_div" v-for="(item, i) in obj.configuration.cumulative" :key="i">
                      <i class="el-icon-error cancal" @click="del(2, i)"></i>
                      <el-form-item label="累计天数"><el-input style="width: 300px;" v-model="item.day"></el-input></el-form-item>
                      <el-form-item label="奖励">
                        <el-input style="width: 300px;" v-model="item.value">
                          <el-select v-model="item.type" slot="append" placeholder="请选择">
                            <el-option label="积分" :value="1"></el-option>
                            <el-option label="余额" :value="2"></el-option>
                          </el-select>
                        </el-input>
                      </el-form-item>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="规则"><tinymce style="width: 600px;" v-model="obj.configuration.info" /></el-form-item>
              </el-tab-pane>
              <el-tab-pane label="样式设置">
                <el-form-item label="背景图片">
                  <div style="width: 100px;height: 100px;"><Upload :tempUrl="obj.configuration.style.bg_img" @input="getimg"></Upload></div>
                </el-form-item>
                <el-form-item label="天数颜色"><ColorPicker :color="obj.configuration.style" :name="'day_color'"></ColorPicker></el-form-item>
                <el-form-item label="提示颜色"><ColorPicker :color="obj.configuration.style" :name="'tip_color'"></ColorPicker></el-form-item>
                <el-form-item label="开关颜色"><ColorPicker :color="obj.configuration.style" :name="'switch_color'"></ColorPicker></el-form-item>
                <el-form-item label="已签到颜色"><ColorPicker :color="obj.configuration.style" :name="'sign_color'"></ColorPicker></el-form-item>
                <el-form-item label="分割线颜色"><ColorPicker :color="obj.configuration.style" :name="'line_color'"></ColorPicker></el-form-item>
                <el-form-item label="未领取颜色"><ColorPicker :color="obj.configuration.style" :name="'res_bg'"></ColorPicker></el-form-item>
                <el-form-item label="文字颜色"><ColorPicker :color="obj.configuration.style" :name="'res_color'"></ColorPicker></el-form-item>
                <el-form-item label="签到按钮颜色"><ColorPicker :color="obj.configuration.style" :name="'btn_bg'"></ColorPicker></el-form-item>
                <el-form-item label="文字颜色"><ColorPicker :color="obj.configuration.style" :name="'btn_color'"></ColorPicker></el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form>
        </div>
        <div class="edit_footer"><el-button v-has type="primary" @click="saveData">保存数据</el-button></div>
      </div>
    </div>
  </el-container>
</template>

<script>
import {getsignin, savesignin} from '@/api/mall/signin';
import ssCalendar from '@/components/ss-calendar/ss-calendar.vue';
import Upload from '@/components/Upload/SingleImage2';
import ColorPicker from '@/components/ColorPicker/index';
import {objextend} from '@/utils/index.js';
import Tinymce from '@/components/Tinymce';
export default {
  data() {
    return {
      isLoading: false,
      obj: {
        type: 'signIn',
        status: 1,
        configuration: {
          signIn: true,
          value: '',
          type: 1,
          is_remind: true,
          info: '',
          continuity: [
            {
              loop: false,
              day: 0,
              value: 0,
              type: 1
            }
          ],
          continuity: [],
          cumulative: [],
          special: [],
          style: {
            bg_img: '',
            day_color: '#FFAB00',
            tip_color: '#ca5f00',
            switch_color: '#FF8900',
            sign_color: '#FFC000',
            line_color: '#FFC000',
            btn_color: '#FFFFFF',
            btn_bg: '#FFC000',
            res_bg: '#FFC000',
            // nores_bg: '#EBEBEB',
            res_color: '#FFFFFF'
            // nores_color: '#999999'
          }
        }
      },
      style: {
        bg_img: '',
        day_color: '#FFAB00',
        tip_color: '#ca5f00',
        switch_color: '#FF8900',
        sign_color: '#FFC000',
        line_color: '#FFC000',
        btn_color: '#FFFFFF',
        btn_bg: '#FFC000',
        res_bg: '#FFC000',
        res_color: '#FFFFFF'
      },
      value: false,
      Rules: {
        accessKeyId: [
          {
            required: true,
            message: '必须填写'
          }
        ],
        accessKeySecret: [
          {
            required: true,
            message: '必须填写'
          }
        ]
      }
    };
  },
  components: {
    ssCalendar,
    Upload,
    ColorPicker,
    Tinymce
  },
  created() {},
  mounted() {
    this.getsignin();
    // this.getConfig('oss');
  },
  methods: {
    getimg(e) {
      this.obj.configuration.style.bg_img = e;
    },
    del(type, i) {
      if (type == 1) {
        this.obj.configuration.continuity.splice(i, 1);
      } else if (type == 2) {
        this.obj.configuration.cumulative.splice(i, 1);
      }
    },
    addlist(type) {
      switch (type) {
        case 1:
          this.obj.configuration.continuity.push({
            type: 1,
            value: 0,
            loop: false,
            day: 0
          });
          break;
        case 2:
          this.obj.configuration.cumulative.push({
            type: 1,
            value: 0,
            day: 0
          });
          break;
      }
    },
    //获取站点配置数据
    getsignin() {
      this.isLoading = true;
      getsignin({})
        .then(res => {
          this.isLoading = false;
          if (res.msg) {
            let obj = res.msg;
            let style = objextend(this.style, obj.configuration.style);
            obj.configuration.style = style;
            this.obj = res.msg;
          }
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //保存数据
    saveData() {
      this.$refs.Form.validate(valid => {
        if (valid) {
          this.isLoading = true;
          savesignin(this.obj).then(res => {
            this.$message('保存成功！');
            this.getsignin();
          });
        } else {
          //校验没通过
          return false;
        }
      });
    }
  }
};
</script>
<style>
.el-select .el-input {
  width: 100px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.flex_div {
  display: flex;
  height: calc(100vh - 110px);
  > div {
    padding: 20px;
    background-color: #ffffff;
  }
  .left {
    margin-right: 20px;
  }
  .right {
    flex: 1;
  }
}
.edit_content {
  height: calc(100% - 60px);
  overflow-y: scroll;
}
.edit_footer {
  height: 60px;
  line-height: 60px;
  box-sizing: border-box;
  flex: 0;
  bottom: 0;
  z-index: 10;
  border-top: 1px solid #dcdfe6;
  text-align: center;
}
.phone-area {
  // height: 100%;
  // min-width: 496px;
  width: 434px;
  height: 828px;
  // flex: 1;
  padding-top: 69px;
  box-sizing: border-box;

  // margin-left: 380px;
  background: url(../../../assets/images/ipbg.png) no-repeat;
  .relative {
    position: relative;
    width: 375px;
    height: 667px;
    margin: 0px auto 0 auto;
  }
  .phone-header {
    height: 64px;
    background: #fff;
    background-size: 100% auto;
    text-align: center;
    cursor: pointer;
    display: block;
    position: relative;
    img {
      width: 100%;
    }
  }
  .scroll-body {
    overflow-y: auto;
    height: fit-content;
    width: 375px;
    height: 603px;

    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0px 4px 14px rgba(133, 148, 162, 0.2);

    // position: relative;
    // left: -1px;
    &::-webkit-scrollbar {
      display: none !important; /* Chrome Safari */
    }
    .page-content {
      min-height: 100%;
      width: 375px;

      .diy-phone {
        width: 375px;
        height: auto;
        min-height: 100%;
        background: #fff;

        .phone-body {
          background: #f3f3f3;
          .phone-main {
            min-height: 603px;
            box-sizing: border-box;
            border-top: 0;
            user-select: none;
            position: relative;
            display: flex;
            flex-direction: column;
          }
        }
      }
    }
  }
}
.img_box {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
}
.mypages {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  .time_div {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    margin-top: 26px;
    .day_num {
      margin: 0 10px;
      display: flex;

      div {
        width: 45px;
        height: 60px;
        background: #fff;
        border-radius: 6px 6px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 4px;
        &::after {
          position: absolute;
          top: 0;
          content: '';
          display: block;
          width: 45px;
          height: 30px;
          background: #faf5f2;
          background-image: linear-gradient(0deg, #e6e2e1, #ffffff);
          border-radius: 6px 6px 0px 0px;
        }
        span {
          font-size: 40px;

          font-weight: 500;
          // color: #ffab00;
          position: relative;
          z-index: 2;
        }
      }
    }
  }
  .tips {
    margin-top: 15px;
    font-size: 12px;
    font-weight: bold;
    color: #ca5f00;
    opacity: 0.7;
  }
  .remind {
    display: flex;
    align-items: center;
    margin-top: 11px;
    span {
      font-size: 12px;
      font-weight: bold;
      color: #ca5f00;
      opacity: 0.7;
      margin-right: 5px;
    }
  }
  .rule {
    width: 243px;
    height: 40px;
    background: linear-gradient(90deg, #ff8900, #ff8900);
    border-radius: 20px;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #ffffff;
    font-weight: 500;
    margin-top: 10px;
    img {
      width: 20px;
      height: 20px;
      // box-shadow: 0px 1px 4px 0px rgba(175, 54, 0, 0.4);
      margin-left: 26px;
      margin-right: 12px;
    }
  }
  .calendar_div {
    margin-top: 30px;
    width: 350px;
    // height: 541rpx;
    background: #ffffff;
    box-shadow: 0px 3px 15px 0px rgba(255, 156, 0, 0.1);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .read-more {
      height: 110px;
      overflow: hidden;
    }
    .title_div {
      .title {
        font-size: 18px;
        font-weight: bold;
        color: #323332;
      }
      margin-top: 40px;
      .mouth {
        font-size: 13px;
        font-weight: bold;
        color: #000000;
        opacity: 0.2;
        text-shadow: 0px 1px 2px rgba(255, 84, 0, 0.2);
      }
    }
    .line {
      width: 330px;
      display: flex;
      justify-content: space-between;
      position: relative;
      top: -7px;
      background: transparent;
      align-items: center;
      i {
        font-size: 20px;
        color: #c2cbd3;
      }
      .line_item {
        width: 150px;
        height: 1px;
        background: #c2cbd3;
      }
    }
    .list {
      padding: 0 10px;
      width: 100%;

      .item {
        height: 72px;
        display: flex;
        align-items: center;
        position: relative;
        border-bottom: 1px dashed #ffc000;
        &:last-child {
          border-bottom: none;
        }
        img {
          width: 27px;
          height: 27px;
          margin-right: 20px;
        }
        .info {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        .signbtn {
          position: absolute;
          right: 0;
          width: 50px;
          height: 20px;
          background: #ffc000;
          border-radius: 10px;
          text-align: center;
          font-size: 11px;
          color: #ffffff;
          line-height: 20px;
        }
      }
    }
  }
  .sign_btn {
    width: 200px;
    height: 44px;
    background: #ffc000;
    border-radius: 22px;
    text-align: center;
    font-size: 17px;
    font-weight: 400;
    color: #ffffff;
    line-height: 44px;
    margin-top: 30px;
  }
  .rule_btn {
    font-size: 12px;
    font-weight: 400;
    color: #b8b9bf;
    margin: 15px;
    i {
      font-size: 12px;
    }
  }
}
.bg_div {
  width: 600px;
  margin-top: 10px;
  background: #f4f6f8;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  .cancal {
    top: -15px;
    right: -15px;
    position: absolute;
    font-size: 30px;
    display: none;
    cursor: pointer;
  }
  &:hover {
    .cancal {
      display: block;
    }
  }
}
</style>
